import React from 'react';
import { connect } from 'react-redux';
import { parseQueryString } from './../../utils';
import * as actions from './../../actions/a_personal_task';
import { TimeIcon, ContactIcon, NoTask } from './../../icons';
import moment from 'moment';
import classnames from 'classnames';
import { Toast } from 'react-weui';

class TaskView extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      code: ''
    }
  }
  componentDidMount() {
    let {
      location = {}
    } = this.props;

    let query = parseQueryString(location.search || '?code=');
    this.props.initTasks(query.code);
    this.setState({
      code: query.code || ''
    })
    document.title = '我的任务';
  }

  render() {
    let {
      data,
      page = {},
      state,
      confirmTask,
      cancelTask
    } = this.props;

    // 后台传的是null，不能用默认值，默认值只对undefined有效
    data = data || [];
    
    if (!data.length) { // 没有任务
      return (
        <div className="my-tasks">
          <div className="no-task">
            <div className="empty-svg">
              <NoTask />
            </div>
            <p className="task-msg">您还没有预约上课哦</p>
          </div>
        </div>
      )
    } else {
      let size = page.size || 20;
      let number = page.number || 0;
      let total = page.total || 0;
      let canLoadMore = (number < (parseInt(total/size, 10)));
      return (
        <div className="my-tasks">
          <Toast icon="success-no-circle" show={state.showConfirmSuccess}>{state.confirmFailMsg}</Toast>
          <Toast iconSize="" icon="warn" show={state.showConfirmfail}>{state.confirmFailMsg}</Toast>
          {
            data.map((item, i) => {
              return <div className="task" key={i+''}>
                <div className="top">
                  <h2>您的客户经理发起的课程预约, 请您确认一下信息</h2>
                </div>
                <section className="taskInfo">
                  <header>{item.productDefineName + '-' + item.periodTimes}</header>
                  <main>
                    <p><TimeIcon /><span>{moment(item.beginTime).format('MM月DD日')}-{moment(item.endTime).format('MM月DD日')}</span></p>
                    <p>预约客户: {item.customerName}</p>
                    <p>地点: <span>{item.cityName}</span><span>{item.place}</span></p>
                    <p><ContactIcon />参客人: 共{item.personNum}人</p>
                    <p><span className='line'>{item.personName}</span></p>
                  </main>
                  <footer>
                    <button
                      onClick={() => {
                        cancelTask(item.id, i);
                      }}
                    >取消</button>
                    <button
                      onClick={() => {
                        confirmTask(item.id, i);
                      }}
                    >确认参加</button>
                  </footer>
                </section>
              </div>
            })
          }
          <p className={classnames('more', {'canLoad': canLoadMore})}><button
            onClick={ () => {
              if (canLoadMore) {
                this.props.moreTasks();
              }
            }}
          >点击查看更多</button></p>
        </div> 
      )
    }
  }
}

export default connect((store) => {
  return {
    ...store.personalTask,
    personalInfo: store.personalInfo
  }
}, {
    ...actions
  })(TaskView);